import React ,{ useRef } from "react";
import {
  Button,
  Collapse,
  ColorPicker,
  Flex,
  Form,
  Input,
  Radio,
  Slider,
} from "antd";
import "./App.css";
import { ColorInput } from "./components/colorinput";
function App() {
  //共享的表单
  const [form] = Form.useForm();
  //监听变化
  const watchedValues = Form.useWatch("pri", form);
  //操作表单
  const setForm = useRef(null);
  const A = ({ text, color }) => {
    console.log('color', color);
    return <div style={{ backgroundColor: color ,width:'300px',border:'1px '}}>{text}</div>;
  };
  const B = ({ sty, color }) => {
    return <div style={{ backgroundColor: color ,width:'300px',border:'1px '}}>{(sty == 1 ? "圆角" : "数字")}</div>;
  };
  const iconList = [
    {
      type: "a",
      icon: <span>a</span>,
      name: "1",
    },
    {
      type: "b",
      icon: <span>b</span>,
      name: "2",
    },
    {
      type: "c",
      icon: <span>c</span>,
      name: "3",
    },
    {
      type: "d",
      icon: <span>d</span>,
      name: "4",
    },
  ];
  //折叠面板的值
  const items = [
    {
      key: "1",
      label: "This is panel header 1",
      children: (
        <Flex>
          {iconList.map((item,index) => {
            return (
              <Flex
              key={index} 
                draggable
                onDragStart={(e) => {
                  console.log(item.type, e);
                  e.dataTransfer.setData("type", item.type);
                  
                }}
                // onDragEnd={(e)=>console.log('end',e)}
              >
                <div>{item.icon}</div>
                <div>{item.name}</div>
              </Flex>
            );
          })}
        </Flex>
      ),
    },
    {
      key: "2",
      label: "This is panel header 2",
      children: (
        <Flex>
          <p>a</p>
          <p>b</p>
          <p>c</p>
        </Flex>
      ),
    },
    {
      key: "3",
      label: "This is panel header 3",
      children: (
        <Flex>
          <p>a</p>
          <p>b</p>
          <p>c</p>
        </Flex>
      ),
    },
  ];

  return (
    <>
      <Flex>
        <Collapse items={items} defaultActiveKey={["1", "2", "3"]} />
        <Form
        form={form}
          style={{
            width: "300px",
            height: "500px",
            border: "1px solid #000",
            marginLeft: "20px",
          }}
          onDragOver={(e) => {
            e.preventDefault();
            e.dataTransfer.dropEffect = "move";
          }}
          onDrop={(e) => {
            console.log("drop", e.dataTransfer.getData("type"));
            setForm.current.add({ type: e.dataTransfer.getData("type") });
          }}
        >
          <Form.List name="pri">
            {(fields) => {
              console.log('fields======>', fields);
              return (
                <> 
                {fields.map((field,index) => {
                const a = watchedValues?.[index]?.type;
                console.log('valueaaaaaaaaa:', a);
                switch (a) {
                  case 'a': 
                  return <A text={watchedValues?.[index]?.text} color={watchedValues?.[index]?.color}/>;
                  case 'b': 
                  return <B sty={watchedValues?.[index]?.sty} color={watchedValues?.[index]?.color}/>;
                }
              })}
                </>
              );
              
            }}
          </Form.List>
        </Form>
        <Form form={form} name="test" onFinish={(v) => console.log("v", v)}>
          <Form.List name="pri">
            {(fields, opts) => {
              setForm.current = opts;
              return (
                <>
                  {fields.map((field, index) => {
                    // 直接使用 switch 语句返回 JSX，而不是包装在函数中
                    switch (watchedValues?.[index]?.type) {
                      case "a":
                        return (
                          <React.Fragment key={field.key}>
                            <Form.Item name={[field.name, "text"]} initialValue={''}>
                              <Input placeholder="请输入" />
                            </Form.Item>
                            <Form.Item name={[field.name, "color"]} initialValue={'#eee'}>
                              <ColorInput/>
                            </Form.Item>
                          </React.Fragment>
                        );
                      case "b":
                        return (
                          <React.Fragment key={field.key}>
                            <Form.Item name={[field.name, "sty"]} initialValue={1}>
                              <Radio.Group
                                options={[
                                  { value: 1, label: "圆角" },
                                  { value: 2, label: "数字" },
                                ]}
                              />
                            </Form.Item>
                            <Form.Item name={[field.name, "color"]}  initialValue="#eee">
                              <ColorInput/>
                            </Form.Item>
                          </React.Fragment>
                        );
                      case "c":
                        return <div key={field.key}>组件C</div>;
                      case "d":
                        return <div key={field.key}>组件D</div>;
                      default:
                        return null;
                    }
                  })}
                </>
              );
            }}
          </Form.List>




          {/* <Form.Item label="Username" name={['pri', 0,'a']}>
      <Form.Item  name={['pri', 0,'a','text']}> 
        <Input />
      </Form.Item>
      <Form.Item  name={['pri', 0,'a','color']}> 
      <ColorPicker defaultValue={'#eee'}/>
      </Form.Item>
    </Form.Item>
    <Form.Item label="Field A" name={['pri',1, 'lunbo']}>
      <Input />
    </Form.Item>
    <Form.Item label="Field B" name={['pri', 2,'seartch']}>
      <Input />
    </Form.Item>
    <Form.Item label="Color" name={['pri', 3,'state']}>
      <Form.Item label="Color" name={['pri', 3,'state', 'incolor']}>
      <ColorPicker defaultValue={'#eee'}/>
      </Form.Item>
      <Form.Item label="Color" name={['pri', 3,'state', 'outcolor']}>
      <ColorPicker defaultValue={'#fff'}/>
      </Form.Item>
      
    </Form.Item>*/}



          <Form.Item>
            <button type="submit">Submit</button>
          </Form.Item>
        </Form>
      </Flex>
    </>
  );
}

export default App;
